<template>
  <div class="classifyCar">
    <div class="classify">
      <h3>分类</h3>
      <ul>
        <template v-if="flag">
          <li v-for="(item, index) in homeList" :key="index">
            <span @click="onClassify(item.category)">{{ item.category }}</span>
            <router-link to="/GoodsCategory"
              v-for="(i, index) in item.classify"
              :key="index"
              @click="onClassify(i.info)"
              >{{ i.info }}</router-link
            >
          </li>
        </template>
        <template v-if="!flag">
          <li v-for="(item, index) in list" :key="index">
            <span @click="onClassify(item.category)">{{ item.category }}</span>
            <a
              v-for="(i, index) in item.classify"
              :key="index"
              @click="onClassify(i.info)"
              >{{ i.info }}</a
            >
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import VueEvent from "@/js/mitt.js";
export default {
  name: "ClassifyCarousel",
  setup() {
    const homeList = ref([
      {
        category: "衣服",
        classify: [{ info: "男装" }, { info: "女装" }, { info: "童装" }],
      },
      {
        category: "手机",
        classify: [{ info: "小米" }, { info: "华为" }, { info: "苹果" }],
      },
      {
        category: "家电",
        classify: [{ info: "冰箱" }, { info: "空调" }, { info: "电视" }],
      },
      {
        category: "鞋包",
        classify: [{ info: "运动鞋" }, { info: "旅行箱" }, { info: "双肩包" }],
      },
      {
        category: "食品",
        classify: [{ info: "水果" }, { info: "零食" }, { info: "生鲜" }],
      },
    ]);
    const list = ref([
      {
        category: "衣服",
        classify: [
          { info: "男装" },
          { info: "女装" },
          { info: "童装" },
          { info: "情侣装" },
          { info: "秋装" },
          { info: "冬装" },
        ],
      },
      {
        category: "手机",
        classify: [
          { info: "小米" },
          { info: "华为" },
          { info: "苹果" },
          { info: "魅族" },
          { info: "联想" },
          { info: "红米" },
        ],
      },
      {
        category: "家电",
        classify: [
          { info: "冰箱" },
          { info: "空调" },
          { info: "电视" },
          { info: "洗衣机" },
          { info: "油烟机" },
          { info: "热水器" },
        ],
      },
      {
        category: "鞋包",
        classify: [
          { info: "运动鞋" },
          { info: "旅行箱" },
          { info: "双肩包" },
          { info: "男鞋" },
          { info: "女鞋" },
          { info: "休闲鞋" },
        ],
      },
      {
        category: "食品",
        classify: [
          { info: "水果" },
          { info: "零食" },
          { info: "生鲜" },
          { info: "雪糕" },
          { info: "冻货" },
          { info: "蔬菜" },
        ],
      },
    ]);
    VueEvent.on("flag", (e) => {
      flag.value = e;
    });
    // 点击分类标签向分类页面传递信息
    const onClassify = (e) => {
      VueEvent.emit("classify", e);
    };
    const flag = ref(true);
    return { list, flag, homeList, onClassify };
  },
};
</script>

<style scoped lang="scss">
.classifyCar {
  margin-top: 30px;
}

.classify {
  margin-right: 20px;
  margin-left: 30px;
  background-color: #ebeced;
  height: 160px;
  vertical-align: bottom;
  border-radius: 10px;
  h3 {
    margin-top: 5px;
    margin-left: 10px;
  }
  ul {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    li {
      display: flex;
      justify-content: space-around;
      span {
        font-size: 16px;
        font-weight: 600;
        color: rgba(69, 69, 68, 0.7);
      }
      a {
        width: 50px;
        color: rgb(37, 37, 37);
      }
    }
  }
}
.classify {
  ul {
    li:hover {
      color: red;
      a {
        color: red;
      }
      a:hover {
        border-bottom: 1px solid red;
      }
    }
  }
}
</style>